<template>
	<view class="ypickerview">
		<unipopup :show="popup_show" :mask-close-able="!force" @change="changepup" type="bottom" borderRadius="10">
			<view class="ypickerview_main">
				<view class="y_picker-hd" @touchmove.stop.prevent catchtouchmove="true">
				  <view class="y_picker-btn" @tap="pickerCancel">取消</view>
				  <view class="y_picker-btn" :style="{'color':themeColor}" @tap="pickerConfirm">确定</view>
				</view>
				<view class="y_picker-view" >
					<!-- @columnchange="columnchange" -->
					<!-- bindPickerChange -->
					<!-- @change="e=> columnchange(e,1)" -->
					<picker-view :indicator-style="itemHeight" :value="pickerValue" @change="columnchange"  mode='multiSelector'>
						<picker-view-column  data-index="1">
							<view class="y_picker-item" v-for="(item,index) in array[0]" :key="index">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column  data-index="2">
							<view class="y_picker-item" v-for="(item,index) in array[1]" :key="index">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column  data-index="3">
							<view class="y_picker-item" v-for="(item,index) in array[2]" :key="index">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column  data-index="4">
							<view class="y_picker-item" v-for="(item,index) in array[3]" :key="index">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column  data-index="5">
							<view class="y_picker-item" v-for="(item,index) in array[4]" :key="index">{{item.name}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</unipopup>
	</view>
</template>

<script>
	import {AddrList} from "@/utils/api/zupu.js" 
	import unipopup from "@/components/uni-popup/uni-popup";
	export default {
		props:{
			themeColor:{
				type:String,
				default(){
					return "#f5a200"
				}
			},
		},
		components:{
			unipopup,
		},
		data(){
			return {
				array:[[],[],[],[],[]],//省市区
				pickerValue:[0,0,0,0,0],//选中的下标
				checkArr:[0,0,0,0,0],

				itemHeight:`height: ${uni.upx2px(88)}px;`,
				force:false,
				popup_show: false, //弹窗是否显示
			}
		},
		async created(){
			await this.getAddressListfun(false,-1);
		},
		methods:{
			//点确定
			pickerConfirm(){
				this.$emit("changpicker",{
					checkArr:this.checkArr,
				});
				this.popup_show = false;
			},
			//点取消
			pickerCancel(){
				this.$emit("cancel",{
					
				});
				this.popup_show = false;
			},
			show(){
				this.popup_show = true;
			},
			changepup(e){
				if(e.show==false){
					this.popup_show = false;
				}
			},
			bindPickerChange(e){ //选择省市区 点击确定
				console.info("bindChange",e);
			
				let trueAddr='',
				value=e.detail.value,//选中的下标
				num=0; 
				for( let i=0;i<value.length;i++){
					if(value[i]==0){
						break;
					}else{
						num++;
					}
				}
				//选了两极以上先清掉之前的
				if(num>2){
					
					this.$emit("clearelech",{})
				}
				let rnobj = {
					province_id:"",
					city_id:"",
					area_id:"",
					town_id:"",
					village_id:"",
				};
				//解析 文字和ID
				if(num==value.length || num>=3){//至少选择三级
					for(let index=0;index<num;index++){
						let item = this.array[index];
						if(index==0){
							trueAddr=trueAddr+''+item[value[index]].name;
						}else{
							trueAddr=trueAddr+','+item[value[index]].name;
						}
						
						if(index==0){
							rnobj.province_id = item[value[index]].value
						}else if(index==1){
							rnobj.city_id = item[value[index]].value
						}else if(index==2){
							rnobj.area_id = item[value[index]].value
						}else if(index==3){
							rnobj.town_id = item[value[index]].value
						}else if(index==4){
							rnobj.village_id = item[value[index]].value
						}
					}
					rnobj.text = trueAddr;
					this.$emit("input",trueAddr)
					this.$emit("select",rnobj)
				}
				
			},
			columnchange(e){ //选择某个地区
				// console.info("eeee",e,index);
				let array=this.array;//省市区 数组
				let column=0; //0省 1市 2区 3街道
				let vvv = e.detail.value
				let checkArr = this.checkArr;
				console.info('checkArr',checkArr);
				// && checkArr[0]!=0
				if(checkArr[0]!=array[0][vvv[0]]["value"] ){
					column = 0;
					console.info("0");
				}else if(checkArr[1]!=array[1][vvv[1]]["value"]){
					column = 1;
					console.info("1");
				}else if(checkArr[2]!=array[2][vvv[2]]["value"]){
					column = 2;
					console.info("2");
				}else if(checkArr[3]!=array[3][vvv[3]]["value"]){
					column = 3;
					console.info("3");
				}else if(checkArr[4]!=array[4][vvv[4]]["value"]){
					column = 4;
					console.info("4");
				}
				
				
				
				// let index=e.detail.value; //下标
				let index=e.detail.value[column]; //下标
				let obj=array[column][index];//停留选中的数据
				this.pickerValue[column]=index;//选中的这项下标添加进去
				if(column==0){//监听的是省
					if(index!=0){
						if(array[1].length!=0){
							this.$set(this.array,1,[]);//将市数据清除
							this.$set(this.array,2,[]);//将区数据清除
							this.$set(this.array,3,[]);
							this.$set(this.array,4,[]);
							this.$set(this.pickerValue,1,0);//将选中数据清除
							this.$set(this.pickerValue,2,0);//将选中数据清除
							this.$set(this.pickerValue,3,0);//将选中数据清除
							this.$set(this.pickerValue,4,0);//将选中数据清除
						}else{
							
						}
						checkArr[0] = obj.value;
						this.checkArr = checkArr;
						this.getAddressListfun(obj.value,column);
					}else{
						this.$set(this.array,1,[]);//选中到请选择去了
						this.$set(this.array,2,[]);
						this.$set(this.array,3,[]);
						this.$set(this.array,4,[]);
					}
				}else if(column==1){//监听的是? 市 1 
						this.$set(this.array,2,[]);//将区数据清除
						this.$set(this.array,3,[]);
						this.$set(this.array,4,[]);
						this.$set(this.pickerValue,2,0);//将选中数据清除
						this.$set(this.pickerValue,3,0);//将选中数据清除
						this.$set(this.pickerValue,4,0);//将选中数据清除
						
						checkArr[1] = obj.value;
						this.checkArr = checkArr;
						
						this.getAddressListfun(obj.value,column);
				}else if(column==2){//监听的是? 区县  2
						this.$set(this.array,3,[]);
						this.$set(this.array,4,[]);
						this.$set(this.pickerValue,3,0);//将选中数据清除
						this.$set(this.pickerValue,4,0);//将选中数据清除
						
						checkArr[2] = obj.value;
						this.checkArr = checkArr;
						
						this.getAddressListfun(obj.value,column);
				}else if(column==3){//监听的是?   3
						this.$set(this.array,4,[]);
						this.$set(this.pickerValue,4,0);//将选中数据清除
						
						checkArr[3] = obj.value;
						this.checkArr = checkArr;
						
						this.getAddressListfun(obj.value,column);
				}else if(column==4){//监听的是?   3
					checkArr[4] = obj.value;
					this.checkArr = checkArr;
				}
			},
			async getAddressListfun(pid,column){ //省市区
				uni.showLoading({title:'请稍后...'});
				let obj={pid:0,ParentId:0,name:'请选择'};
				let can = {};
				if(column==0){
					can.province_id = pid;
				}
				if(column==1){
					can.city_id = pid;
				}
				if(column==2){
					can.area_id = pid;
				}
				if(column==3){
					can.town_id = pid;
				}
				let res=await AddrList({
					...can,
				});
				if(res.code==1){
					uni.hideLoading();
					res.data.unshift(obj);
					if(pid || pid===0){ //一开始请求省
						if(column==0){ //选则了省 请求出了市的数据
							this.$set(this.array,1,res.data);
						}else if(column==1){  //选则了市 请求出了区的数据
							this.$set(this.array,2,res.data);
						}else if(column==2){
							this.$set(this.array,3,res.data);
						}else if(column==3){
							this.$set(this.array,4,res.data);
						}else if(column==4){
							
						}
					}else if(column==-1){
						this.$set(this.array,0,res.data);
						this.$set(this.array,1,[]);
						this.$set(this.array,2,[]);
						this.$set(this.array,3,[]);
						this.$set(this.array,4,[]);
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.ypickerview_main{
		height: 600rpx;
		width: 100%;
		background-color: #FFFFFF;
	}
	.y_picker-view {
	  width: 100%;
	  height: 476upx;
	  overflow: hidden;
	  background-color: rgba(255, 255, 255, 1);
	  z-index: 666;
	}
	picker-view{
		height: 100%;
	}
	.y_picker-item {
	  text-align: center;
	  width: 100%;
	  height: 88upx;
	  line-height: 88upx;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  font-size: 30upx;
	}
	
	.y_picker-hd {
	  display: flex;
	  align-items: center;
	  padding: 0 30upx;
	  height: 88upx;
	  background-color: #fff;
	  position: relative;
	  text-align: center;
	  font-size: 32upx;
	  justify-content: space-between;
	  .y_picker-btn{
	  	font-size: 30upx;
	  }
	}
	
	.y_picker-hd:after {
	  content: ' ';
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  right: 0;
	  height: 1px;
	  border-bottom: 1px solid #e5e5e5;
	  color: #e5e5e5;
	  transform-origin: 0 100%;
	  transform: scaleY(0.5);
	}
</style>